<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>呼叫云</title>
    <link rel="shortcut icon" href="../img/logox_circle.png">
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/admin.css">
    <script src="../js/jquery-1.11.0.min.js"></script> 
    <script src="../js/fenye.js"></script>
    <script src="../js/config.js"></script>
    <script src="../js/treeTable/jquery.treeTable.js"></script>
    <script type="text/javascript">
		$(function(){
			$("#showName").val("role2");
			getRolePrivilegeList();
		});
		//返回
		function goback(){
			var url='${url}';
			location.href=serviceConfig.role.getRoleList+url;
		}
		//获取角色权限列表
		function getRolePrivilegeList(){
			var roleID = $("#roleID").val();
			$.ajax({
				url:serviceConfig.role.getRolePrivilegeList,
				type: "get",
				data:{
				     roleID:roleID
				 },
				dataType: "json",
				success:function(data){
					//console.log(data);
					showRolePrivilegeList(data);
				  },
				error:function(data){
				    console.log(data);
				 }
			});		 				
		}
		//页面显示
		function showRolePrivilegeList(data){
			if(data.flag == '1'){
					 	var rolePrivilegeList = data.rolePrivilegeList;
					 	var html ="";
					 		html +='<tr>'
			                 +'<td style="text-align:left;padding-left:60px;">权限名称</td>'
			                 +'<td>菜单名称</td>'
			                 +'<td>权限编码</td>'
			                 +'<td>权限类型</td>'
			                 +'<td>权限等级</td>'
			                 +'<td>权限顺序</td>'
			                 +'<td>备注</td>'
			             +'</tr>';
			            if(rolePrivilegeList.length>0){
			            	for(var i=0;i<rolePrivilegeList.length;i++){
						 		var type = rolePrivilegeList[i][3]
						 		if(type == '1'){
						 			type = "菜单";
						 		}else if(type == '2'){
						 			type = "链接";
						 		}else if(type == '3'){
						 			type = "按钮";
						 		}
						 		var moName = rolePrivilegeList[i][8];
						 		if(moName == null){
						 			moName = "";
						 		}
						 		var pId = rolePrivilegeList[i][7];
						 		if(pId == null){
						 			pId = "";
						 		}
						 		
						 		var showName = rolePrivilegeList[i][1];
						 		if(showName == null){
						 			showName = "";
						 		}
						 		
						 		var code = rolePrivilegeList[i][2];
						 		if(code == null){
						 			code = "";
						 		}
						 		
						 		var privilegeOrder = rolePrivilegeList[i][5];
						 		if(privilegeOrder == null){
						 			privilegeOrder = "";
						 		}
						 		
						 		var remark = rolePrivilegeList[i][6];
						 		if(remark == null){
						 			remark = "";
						 		}
				                 var level = rolePrivilegeList[i][4];
				                 if(level == null){
						 			level = "";
						 		 }
				                 if(level == '1'){
				                   	html += '<tr class="" id="'+rolePrivilegeList[i][0]+'" pId="'+pId+'">'
				                   		+'<td style="text-align:left;padding-left:50px;">'
				                   		+'<span>'+showName+'</span>'
				                  }else if(level == '2'){
				                   	html += '<tr class="" id="'+rolePrivilegeList[i][0]+'" pId="'+rolePrivilegeList[i][7]+'">'
				                   		+'<td style="text-align:left;padding-left:80px;">'
				                   		+'<span">'+showName+'</span>'
				                  }else if(level == '3'){
				                   	html += '<tr class="" id="'+rolePrivilegeList[i][0]+'" pId="'+rolePrivilegeList[i][7]+'">'
				                   		+'<td style="text-align:left;padding-left:110px;">'
				                   		+'<span">'+showName+'</span>'
				                   }
				                   html+='</td>'
				                   +'<td>'+moName+'</td>'
				                   +'<td>'+code+'</td>'
				                   +'<td>'+type+'</td>'
				                   +'<td>'+level+'</td>'
				                   +'<td>'+privilegeOrder+'</td>'
				                   +'<td>'+remark+'</td>'
				                   +'</tr>';
						 	}
			            }else{
			            	html += '<tr><td colspan="7">暂无角色权限</td></tr>'
			            }
					 	
					 	$("#treeTable2").html("");
					 	$("#treeTable2").html(html);
					 	
					 	initTable();
					 }
		}
        // 初始化treeTable
        function initTable(){
            var option = {
                theme:'vsStyle',
                expandLevel : 1,
                beforeExpand : function($treeTable, id) {
                    //判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用
                    if ($('.' + id, $treeTable).length) { return; }
                    //请求数据
                },
                onSelect : function($treeTable, id) {
                    window.console && console.log('onSelect:' + id);

                }
            };
			
            $('#treeTable2').treeTable(option);
        }
		//编辑
		function updateRolePrivilege(){
			var roleID = $("#roleID").val();
			getRolePrivilegeList1(roleID);
		}
	</script>
</head>

<body>
<div class="lefter">
    <div class="logo"><a href="#" target="_blank"><img style="width:100%;" src="../img/logo3.png" alt="呼叫云后台管理系统" /></a></div>
</div>
<div class="righter nav-navicon" id="admin-nav">
    <div class="mainer">
        <div class="admin-navbar">
            <span class="float-right">
            	<span id="user_name"></span>
                <a class="button button-little bg-yellow" href="login">注销登录</a>
            </span>
            <#include "../common/head.ftl"> 
        </div>
        <div class="admin-bread">
            <ul class="bread">
                <li><a class="icon-user-md"> 权限管理</a></li>
                <li><a >角色权限</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="admin">
<a href="#" onclick="goback()"><<返回</a><a class="button bg-main" style="margin-left:5%;"  href="#modal" id="updateRolePrivilege" onclick="updateRolePrivilege()">编辑</a>
    <div class="panel admin-panel" style="margin-top:10px;">
    	<div class="panel-head"><strong>${roleName}权限列表</strong></div>
    	<input type="hidden" id="roleID" value="${roleID}"/>
        <table id="treeTable2" class="table table-hover">
        	
           </table>
    </div>
    </form>
</div>
<div id="modal" class="admin" style="display:none;width:70%;height:80%;border-radius:10px 10px 10px 10px;padding:20px;">
	<#include "updateRolePrivilege.ftl"> 
</div>
</body>
</html>